<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        解决图片闪烁的问题
            可以将多个小图片统一保存到一个大图片中,然后通过调整backgroud-position来调整图片的位置
            这样图片会同时加载到网页中就可以有效的避免图片闪烁的问题
            这个技术在网页中应用十分的广泛,被称为css-sprite,这种图称为雪碧图

        雪碧图的使用步骤
            1.首先确定使用的图标
            2.测量图标的大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为背景图片
            5.设置一个偏移量以显示正确的图片


        雪碧图的特点,
            一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户体验
     -->
</body>
</html>